<!--
    用户管理->消费记录
-->
<template>
  <div class="userConsume">
    <el-button size="medium" type="text" icon="el-icon-coin" @click="handleActive()" >消费记录</el-button>
    <el-dialog width="1100px" v-dialogDrag destroy-on-close :visible.sync="consumeVisible" :append-to-body='true' @close="consumeVisible = false">
        <template v-slot:title>
            <p style="font-size: 16px;margin-bottom: 0px;">手机号为<span class="red">{{statusRow.telephone}}</span>用户的消费记录</p>
        </template>
        <el-table :data="consumeList" style="width: 100%" border :height="600"  v-el-table-infinite-scroll="dialogTableListScroll"  stripe>
          <el-table-column prop="orderId" label="订单号" align="center"></el-table-column>
          <el-table-column prop="orderTypeName" label="订单类型" align="center"></el-table-column>
          <el-table-column prop="goodsName" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="goodsTotalPrice" label="订单总价(元)" align="center"></el-table-column>
          <el-table-column prop="discountPrice" label="实付款(元)" align="center"></el-table-column>
          <el-table-column prop="name" label="完成时间" align="center">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime) }}</span>
            </template>
          </el-table-column>
          <p slot="append" style="text-align:center; line-height:48px;" v-if="tableLoading">正在加载...</p>
          <p slot="append" style="text-align:center; line-height:48px;" v-if="tableIsMore">没有更多了</p>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="consumeVisible = false" size="small" >关 闭</el-button>
        </div>
     </el-dialog>
  </div>


</template>

<script>
  import { getConsumptionRecords } from '@/api/getData';
  import elTableInfiniteScroll from 'el-table-infinite-scroll';
 export default {
   name: 'userConsume',
   directives: {
     'el-table-infinite-scroll': elTableInfiniteScroll
   },
   props: ['id','statusRow'],
   data(){
     return{
       consumeVisible:false,
       userLoading:false,
       consumeList:[],
       pageNum:1,
       pageSize:20,
       total:0,
       isNextPage:true,
       tableLoading:false,//弹框表格 正在加载
       tableIsMore:false,//弹框表格 没有更多
     }
   },

   mounted() {
   },
   methods:{
      handleActive(){
        this.consumeList = [];
        this.pageNum = 1;
        this.consumeVisible = true;
        this.dataInfo();
      },
      async dataInfo(){
        try {
          let data = {
             pageNum:this.pageNum,           pageSize:this.pageSize,
            customerId:this.id
          }
          this.tableLoading = true;
          this.tableIsMore = false;
          this.isNextPage = true;
          const result = await getConsumptionRecords(data);
          if (result.code == 200) {
              this.consumeList = this.consumeList.concat(result.rows);
              if(result.rows.length<20 && (this.pageNum != '1')){
                  this.tableIsMore = true;
              }
              if(result.rows.length<20){/*判断是否有下一页*/
                this.isNextPage = false;
              }else{

                this.isNextPage = true;
              }
          } else {
             this.isNextPage = false;
            this.$message.error(result.msg);
          }
          this.$nextTick(()=>{
            this.tableLoading = false
          })
        } catch (err) {
           this.loading = false;
          console.log(err)
        }
      },
      dialogTableListScroll(){/*弹框列表滚动*/
        if(this.isNextPage && !this.tableLoading){
          this.pageNum++;
          this.dataInfo();
        }
      },
   }
 }
</script>

<style lang="scss" scoped>
  .userConsume{
    width:100%
  }
</style>
